
//获取当前的登录用户名
var s = location.search; //当前地址栏中URL中的查询字符串部分
var loginName = s.substring(s.indexOf('=')+1);


/***********todo 模态框点击登陆*************/

//1 验证是否登陆
var loginName=sessionStorage.getItem('loginName');

//2 通过异步加载 页面头部和尾部
$('#top').load('data/top.php',function(){
	//处理是否登陆后的逻辑
	if(loginName){//登陆过
		$('#login').parent().html('您好，欢迎回来'+loginName);

	}else{//没登陆过
		$('.modal').css('display','block');
	}
});
$('#bottom').load('data/bottom.php');



/****todo 产品列表页加载完成，异步请求上一页记录**/
$(function(){
	loadProduct(1);
})
//为分页条中超链接代理事件监听
$('#blist .pager').on('click','a',function(e){
	e.preventDefault();
	var pno=$(this).attr('href');//目标页号
	console.log(pno);
	loadProduct(pno);
});
//异步分页加载商品列表
function loadProduct(pno){
	$.getJSON('data/2_product_2.php',{'pno':pno},function(pager){
		//构建产品列表的内容
		var html='';
		$.each(pager.data,function(i,p){
			//console.log(p);
			html+=`
                <li>
                    <a href="firefly.html"><img src="${p.pic}" alt=""/></a>
                    <p>￥${p.price}</p>
                    <h1><a href="firefly.html">${p.pname}</a></h1>

                </li>
            `;
		});
		$('#blist ul').html(html);


		//2 构建分页条中的内容
		var pagerHtml = '';
		if(pager.pno-2>0){
			pagerHtml += `<li><a href="${pager.pno-2}">${pager.pno-2}</a></li> `;
		}
		if(pager.pno-1>0){
			pagerHtml += `<li><a href="${pager.pno-1}">${pager.pno-1}</a></li> `;
		}
		pagerHtml += `<li class="active"><a href="#">${pager.pno}</a></li> `;
		if(pager.pno+1<=pager.pageCount){
			pagerHtml += `<li><a href="${pager.pno+1}">${pager.pno+1}</a></li> `;
		}
		if(pager.pno+2<=pager.pageCount){
			pagerHtml += `<li><a href="${pager.pno+2}">${pager.pno+2}</a></li> `;
		}
		$('#blist .pager').html(pagerHtml);
	});
}

/******todo 点击 去购物车结算*****/
$(document.body).on('click','#settle_up',function(){
	//同步页面跳转 window.open  location.href...
	location.href='shoppingcart.html?loginName='+loginName;

})


/************todo 左侧菜单弹出***********/

$("#header_left .chuck").bind("mouseover",function(e){
	var target=e.target;
	if(target.className!="header_popup")
	{
		while (target.parentNode.className!="header_popup")
		{
			target=target.parentNode;
		}

		$(target).children(".sub_cate_box").css("display","block");
		$(target).children('ul').css('background','#fff')
			                    .css('z-index','999')
			                    .css('cursor','pointer')
			                    .css('position','relative');
	}
});
$("#header_left .chuck").bind("mouseout",function(e){
	var target=e.target;
	//console.log(this);

	if(target.className!="header_popup")
	{
		while (target.parentNode.className!="header_popup")
		{
			target=target.parentNode;
		}
		$(target).children(".sub_cate_box").css("display","none");
		$(target).children('ul').css('background','').css('z-index','').css('cursor','');
	}
});



/***********todo 榜单(jquery)***********/
$('#sell_good ul.sell_hea li a').on('mouseover',function(e){
	e.preventDefault();
	$(this).parent().addClass('active').siblings('.active').removeClass('active');
	var h=$(this).attr('href');//获得a的href属性值
	//console.log(h);
	//根据id选择器选择要操作的div
	$(h).addClass('active').siblings('.active').removeClass('active');
});


/************todo 独家特供***************/
//页面加载完成是 异步请求zd_book类型的书
$(function(){
	$.getJSON('data/3_book_select.php',{type:'zd_book'},function(list){
		//console.log('开始处理相应数据');
		//console.log(arguments);
		var html='';
		$.each(list,function(i,book){
			html+=`
				<li>
                    <a href="#"><img src="${book.mpic}" alt=""/></a>
                    <p>￥${book.mprice}</p>
                    <h1><a href="#">${book.mname}</a></h1>
                </li>
			`;
		});
		$('.content_body').html(html);
	});
});

//2鼠标停在某个类别下 异步请求该类型的书
$('#content ul.content-hea li').mouseenter(function(){
	//console.log('触发啦');
	$(this).addClass('active').siblings('.active').removeClass('active');

	//读取li的data-type扩展属性
	var type=$(this).data('book-type');
	//异步请求该类型的书
	$.getJSON('data/3_book_select.php',{type:type},function(list){
		var html='';
		$.each(list,function(i,book){
			html+=`
				<li>
                    <a href="#"><img src="${book.mpic}" alt=""/></a>
                    <p>￥${book.mprice}</p>
                    <h1><a href="#">${book.mname}</a></h1>
                </li>
			`;
		});
		$('.content_body').html(html);
	});
});




/**********todo 轮播广告***********/
var imgs=[
 {"i":0,"src":"img/lb1.jpg"},
 {"i":1,"src":"img/lb2.jpg"},
 {"i":2,"src":"img/lb3.jpg"},
 {"i":3,"src":"img/lb4.jpg"},
 {"i":4,"src":"img/lb5.jpg"},
];
var adv={
	LIWIDTH:0,//保存每个li的宽度
	DIATANCE:0,//总距离
	DURATION:0,//总时间
	STEPS:200,//总步数
	interval:0,//步频
	step:0,//步长
	timer:null,//定时器序号
	moved:0,//本次动画已经移动的步数
	WAIT:3000,//自动轮播等待时间
	canAuto:true,//标识能否启动自动轮播*/
	/*方法*/
init:function(){
		//获得id为slider的宽，转为浮点数，保存在LIWIDTH
		this.LIWIDTH=parseFloat($('#header_ad').css('width'));
		this.updateView();
		//计算interval: DURATION/STEPS
		this.interval=this.DURATION/this.STEPS;
		//为id为idxs的ul绑定鼠标进入事件
		$("#idxs").on("mouseover",
		  function(e){
			var target=e.target;//获得target
			//如果target是li且target的class不是hover
			if(target.nodeName=="LI"
				&&target.className!="hover"){
			  //找到id为idxs下的class为hover的li，获取其内容保存在start中
			  var start=
            $("#idxs>.hover")[0].innerHTML;
          //获得target的内容保存在end中
          var end=target.innerHTML;
          this.move(end-start);
			}
		  }.bind(this)//提前绑定this
		);
		//自动启动自动轮播
		this.autoMove();
		//为id为slider的div绑定鼠标进入事件
		$("#header_ad").on("mouseover",
		  function(){//将canAuto改为false
			this.canAuto=false;
		  }.bind(this)
		);
		//为id为silder的div绑定鼠标移出事件
		$("#header_ad").on("mouseout",
		  function(){//将canAuto改为true
			this.canAuto=true;
		  }.bind(this)
		);
	},

	autoMove:function(){
		//启动一次性定时器，将序号保存在 timer
		this.timer=setTimeout(
		  function(){//如果可以自动轮播
			this.canAuto?
			  this.move(1):this.autoMove();
		  }.bind(this),
		  this.WAIT//等待WAIT
		);
	},

	//启动动画
	move:function(n){
		 //停止动画，清除timer-防止动画叠加
    clearInterval(this.timer);
    this.timer=null;
    if(n<0){//如果右移
      //删除imgs结尾的n个元素，拼接到imgs开头
      imgs=imgs.splice(imgs.length+n,-n)
               .concat(imgs);
      this.updateView();//更新页面
      //获得id为imgs的ul的left
      var left=parseFloat(
        getComputedStyle($("#imgs")[0]).left
      );
      //计算start:left-this.LIWIDTH*n;
      var start=left-this.LIWIDTH*(-n);
      //设置id为imgs的ul的left为left-LIWIDTH*n
      $("#imgs")[0].style.left=start+"px";
      var end=0;
    }else{//如果左移
     //获得id为imgs的ul的left，保存在变量start中
      var start=parseFloat($("#imgs").css('left'));
      //用-LIWIDTH*n，保存在变量end中
      var end=-this.LIWIDTH*n;
    }
    //求DISTANCE: -(end-start)
    this.DISTANCE=-(end-start);
    //求step:DISTANCE/STEPS
    this.step=this.DISTANCE/this.STEPS;
    //启动周期性定时器: moveStep，间隔interval，序号保存在timer中
    this.timer=setInterval(
      this.moveStep.bind(this,n),this.interval
    );
	},

	//移动一步
	moveStep:function(n){
		 var left=parseFloat(
      getComputedStyle($("#imgs")[0]).left
    );
    //设置id为imgs的ul的left为left-step
    $("#imgs")[0].style.left=left-this.step+"px";
	
    this.moved++;//moved+1
    //如果moved==STEPS
    if(this.moved==this.STEPS){//移动结束
      //停止定时器，清除timer, moved归0
      clearInterval(this.timer);
      this.timer=null;
      this.moved=0;
      if(n>0){//如果左移
        //删除数组开头的n个元素，拼接到结尾
        imgs=imgs.concat(imgs.splice(0,n));
        this.updateView();//更新界面:  
      }
      //清除id为imgs的left
      $("#imgs")[0].style.left="";
      //调用autoMove，启动自动轮播
      this.autoMove();
		}
	},

	//根据数组更新界面
	updateView:function(){
		$("#imgs")[0].innerHTML="";
		//清除id为idxs的ul的内容
		$("#idxs")[0].innerHTML="";
		var fragImgs=//创建fragImgs
		  document.createDocumentFragment();
		var fragIdxs=//创建fragIdxs
		  document.createDocumentFragment();
		//遍历imgs中每个img
		for(var i=0;i<imgs.length;i++){
			  //创建li
			  var li=document.createElement("li");
			  var img=new Image();//新建img
			  //设置img的src为当前元素的src属性
			  img.src=imgs[i].src;
			  //将img追加到li下
			  li.appendChild(img);
			  //将li追加到fragImgs下
			  fragImgs.appendChild(li);
			  li=document.createElement("li");//创建li
			  //如果i等于imgs中第0个元素的i属性
			  if(i==imgs[0].i){
				//设置li的class为hover
				li.className="hover";
			  }
			  //设置其内容为i+1
			  li.innerHTML=i+1;
			  //将li追加到fragIdxs下
			  fragIdxs.appendChild(li);
		}
			//将fragImgs追加到id为imgs的ul下
			$("#imgs")[0].appendChild(fragImgs);
			//将fragIdxs追加到id为idxs的ul下
			$("#idxs")[0].appendChild(fragIdxs);
			//设置id为imgs的ul的宽为imgs的元素个数*LIWIDTH
			$("#imgs").css("width",this.LIWIDTH*imgs.length+"px");
	}

}
adv.init();
//1. 左移: 先移动，再改数组，更新界面
//2. 右移: 先改数组，更新界面，再移动


































































